<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿百度注册</title>
    <link rel="stylesheet" href="custom.css">
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
//function m(){
//var x=document.getElementById("fname1");
//if (x.value.length>5){
//document.getElementById("zyx1").src = "ok_small.png";
//    document.getElementById("demo1").innerHTML = "";
//    document.getElementById("fname1").className = "right";
//  }
//  else {
//document.getElementById("zyx1").src = "err_small.png";
//    document.getElementById("demo1").innerHTML = "用户名设置不正确";
//    document.getElementById("demo1").style.color = "red";
//    document.getElementById("fname1").className = "err";
//  }
//}
function n() {
    var y = document.getElementById("fname2");
    if(y.value.length>11 || y.value.length<11){
        document.getElementById("fname2").className = "err";
        document.getElementById("zyx2").src = "err_small.png";
        document.getElementById("demo2").innerHTML = "请输入11位数字";
        document.getElementById("demo2").style.color = "red";
    }
    else if (y.value[0] >1 ||y.value[0] <1){
        document.getElementById("fname2").className = "err";
        document.getElementById("zyx2").src = "err_small.png";
        document.getElementById("demo2").innerHTML = "您输入的电话号码格式不对";
        document.getElementById("demo2").style.color = "red";
    }
    else{
        document.getElementById("zyx2").src = "ok_small.png";
        document.getElementById("demo2").innerHTML = "";
        document.getElementById("fname2").className = "right";
    }
}
function o() {
    var z = document.getElementById("fname3");
    if(z.value.length<12){
        document.getElementById("fname3").className = "err";
        document.getElementById("zyx3").src = "err_small.png";
        document.getElementById("demo3").innerHTML = "密码必须大于11位数";
        document.getElementById("demo3").style.color = "red";
    }

    else {
        document.getElementById("zyx3").src = "ok_small.png";
        document.getElementById("demo3").innerHTML = "";
        document.getElementById("fname3").className = "right";
    }
}
    </script>

    <style>
        .err{
            outline:none;
            border: 1px solid red;
            width: 350px;
            height: 40px;
        }
    </style>
</head>
<body>
        <script>
         document.getElementById('username').onclick = function () {
        flag = true;
        if(this.value.length < 5 || this.value.length > 15){
            document.getElementById("zyx1").src = "err_small.png";
            document.getElementById("demo1").innerHTML = "用户名在5到15位之间";
            document.getElementById("demo1").color = "red";
            return
        }
//        $.ajax({
//            url: 'http://192.168.123.51:5000/check_form',
//            type: 'GET', //GET
//            async: true,    //或false,是否异步
//            data: {
//                username: $('#username').val()
//            },
//            timeout: 500000,    //超时时间
//            dataType: 'json', //返回的数据格式：json/xml/html/script/jsonp/text
//            beforeSend: function (xhr) {
//                console.log('发送前')
//            },
//            success: function (data, textStatus, jqXHR) {
//                alert(data);
//                if(data == 400){
//                    $("#zyx1").html("<img src='err_small.png'> ");
//                    document.getElementById("zyx1").color = "red";
//                    document.getElementById("demo1").innerHTML = "请输入用户名"
//                    document.getElementById("demo1").color = "red"
//                    flag = false
//                }else if(data == 300){
//                    $("#zyx1").html("<img src='err_small.png'> ");
//                    document.getElementById("zyx1").color = "red";
//                    document.getElementById("demo1").innerHTML = "用户名已被占用"
//                    document.getElementById("demo1").color = "red";
//                    flag = false
//                }
//            },
//            error: function (xhr, textStatus) {
//                console.log('错误');
//            },
//            complete: function () {
//                console.log('结束')
//            }
//        });
 $.ajax({
            url: 'http://192.168.123.153:5000/check_form',
            type: 'GET', //GET
            async: true,    //或false,是否异步
            data: {
                username: $('#username').val()
            },
            timeout: 500000,    //超时时间
            dataType: 'json', //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend: function (xhr) {
                console.log('发送前')
            },
            success: function (data, textStatus, jqXHR) {
                console.log(data);
                if(data == 400){
                    $("#zyx1").html("<img src='err_small.png'> ");
                    document.getElementById("zyx1").color = "red";
                    document.getElementById("demo1").innerHTML = "请输入用户名";
                    document.getElementById("demo1").color = "red";
                    flag = false
                }else if(data == 300){
                    $("#zyx1").html("<img src='err_small.png'> ");
                    document.getElementById("zyx1").color = "red";
                    document.getElementById("demo1").innerHTML = "用户名已被占用";
                    document.getElementById("demo1").color = "red";
                    flag = false
                }
            },
            error: function (xhr, textStatus) {
                console.log('错误');
            },
            complete: function () {
                console.log('结束')
            }
        });
        if (flag == true){
            this.style.borderColor = "white";
            document.getElementById("zyx1").src = "ok_small.png";
            document.getElementById("demo1").innerHTML = "";
           document.getElementById("fname1").className = "right";
        }
    }
         </script>
<div class="register">
    <p>
        <label>用户名</label><input class = "right" id = "username" type="text" placeholder="请设置用户名"><img id = "zyx1" src=""><span id = "demo1">请输入用户名</span>
    </p>
    <p>
        <label>手机号</label><input class="right" id = "fname2" onblur="n()" type="text" placeholder="请填写手机号"><img id = "zyx2" src=""><span id = "demo2"></span>
    </p>
    <p>
        <label>密码</label><input class=" right" onblur="o()" id="fname3" type="password" placeholder="请设置用户密码"><img id = "zyx3" src=""><span id = "demo3"></span>
    </p>
    <p>
        <label>验证码</label>
        <input type="text" class="right" placeholder="验证码" style="width: 205px">
        <input type="button" value="点击获取验证码" style="width: 143px">
    </p>
    <p style="margin-left: 75px;font-size: 12px">
        <input type="checkbox"> 阅读并接受<a href="http://passport.baidu.com/static/passpc-account/html/protocal.html">《百度用户协议》</a>及<a href="https://www.baidu.com/duty/yinsiquan.html">《百度隐私权保护声明》</a>
    </p>
    <p style="margin-left: 75px;">
        <input type="button" value="注册">
    </p>
</div>

</body>
</html>